FLUX-fill standalone

{
  "id": "OvuZIXwt9mdU2JGK",
  "meta": {
    "instanceId": "fb924c73af8f703905bc09c9ee8076f48c17b596ed05b18c0ff86915ef8a7c4a",
    "templateCredsSetupCompleted": true
  },
  "name": "FLUX-fill standalone",
  "tags": [],
  "nodes": [
    {
      "id": "9f051c89-0243-48fb-baa4-666af3fe54b3",
      "name": "Merge",
      "type": "n8n-nodes-base.merge",
      "position": [
        940,
        120
      ],
      "parameters": {
        "mode": "combine",
        "options": {},
        "combineBy": "combineByPosition"
      },
      "typeVersion": 3
    },
    {
      "id": "5da963f7-4320-4359-aefa-bf8f6d6ef815",
      "name": "Respond to Webhook",
      "type": "n8n-nodes-base.respondToWebhook",
      "position": [
        1520,
        120
      ],
      "parameters": {
        "options": {},
        "respondWith": "text",
        "responseBody": "={{ $json.html }}"
      },
      "typeVersion": 1.1
    },
    {
      "id": "05d877bc-b591-478c-b112-32b7efe1ca3f",
      "name": "Wait 3 sec",
      "type": "n8n-nodes-base.wait",
      "position": [
        920,
        680
      ],
      "webhookId": "90f31c1f-6707-4f2f-b525-d3961432cd81",
      "parameters": {
        "amount": 3
      },
      "typeVersion": 1.1
    },
    {
      "id": "a3cc4a50-4218-4a01-ab20-151fd707dd66",
      "name": "Is Ready?",
      "type": "n8n-nodes-base.if",
      "position": [
        1340,
        680
      ],
      "parameters": {
        "options": {},
        "conditions": {
          "options": {
            "version": 2,
            "leftValue": "",
            "caseSensitive": true,
            "typeValidation": "strict"
          },
          "combinator": "and",
          "conditions": [
            {
              "id": "3cf5b451-9ff5-4c2a-864f-9aa7d286871a",
              "operator": {
                "name": "filter.operator.equals",
                "type": "string",
                "operation": "equals"
              },
              "leftValue": "={{ $json.status }}",
              "rightValue": "Ready"
            }
          ]
        }
      },
      "typeVersion": 2.2
    },
    {
      "id": "76a2dcd4-0e57-461d-a8b9-8f52baa3f86a",
      "name": "Sticky Note",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        520,
        -100
      ],
      "parameters": {
        "width": 1193,
        "height": 479,
        "content": "# Deliver the editor with links to the images"
      },
      "typeVersion": 1
    },
    {
      "id": "b32e8e0b-a449-47d9-8de4-c0062235ff99",
      "name": "FLUX Fill",
      "type": "n8n-nodes-base.httpRequest",
      "position": [
        660,
        680
      ],
      "parameters": {
        "url": "https://api.bfl.ml/v1/flux-pro-1.0-fill",
        "method": "POST",
        "options": {},
        "sendBody": true,
        "authentication": "genericCredentialType",
        "bodyParameters": {
          "parameters": [
            {
              "name": "prompt",
              "value": "={{ $json.body.prompt }}"
            },
            {
              "name": "steps",
              "value": "={{ $json.body.steps }}"
            },
            {
              "name": "prompt_upsampling",
              "value": "={{ $json.body.prompt_upsampling }}"
            },
            {
              "name": "guidance",
              "value": "={{ $json.body.guidance }}"
            },
            {
              "name": "output_format",
              "value": "png"
            },
            {
              "name": "safety_tolerance",
              "value": "6"
            },
            {
              "name": "image",
              "value": "={{ $json.body.image.split(',')[1] }}"
            },
            {
              "name": "mask",
              "value": "={{ $json.body.mask.split(',')[1] }}"
            }
          ]
        },
        "genericAuthType": "httpHeaderAuth"
      },
      "credentials": {
        "httpHeaderAuth": {
          "id": "4eQN9wBw8SniKcPw",
          "name": "bfl-FLUX"
        }
      },
      "typeVersion": 4.2
    },
    {
      "id": "d7d70191-5316-4f20-b570-b8f138b77762",
      "name": "Check FLUX status",
      "type": "n8n-nodes-base.httpRequest",
      "position": [
        1120,
        680
      ],
      "parameters": {
        "url": "https://api.bfl.ml/v1/get_result",
        "options": {},
        "sendQuery": true,
        "authentication": "genericCredentialType",
        "genericAuthType": "httpHeaderAuth",
        "queryParameters": {
          "parameters": [
            {
              "name": "id",
              "value": "={{ $json.id }}"
            }
          ]
        }
      },
      "credentials": {
        "httpHeaderAuth": {
          "id": "4eQN9wBw8SniKcPw",
          "name": "bfl-FLUX"
        }
      },
      "typeVersion": 4.2
    },
    {
      "id": "dafc2712-114f-4723-b587-08ff853513f5",
      "name": "Get Fill Image",
      "type": "n8n-nodes-base.httpRequest",
      "position": [
        1560,
        780
      ],
      "parameters": {
        "url": "={{ $json.result.sample }}",
        "options": {}
      },
      "typeVersion": 4.2
    },
    {
      "id": "68672890-62c3-4020-a09c-9ea691cba361",
      "name": "Show the image to user",
      "type": "n8n-nodes-base.respondToWebhook",
      "position": [
        1900,
        780
      ],
      "parameters": {
        "options": {
          "responseHeaders": {
            "entries": [
              {
                "name": "Content-Type",
                "value": "={{ $binary.data.mimeType }}"
              }
            ]
          }
        },
        "respondWith": "binary",
        "responseDataSource": "set"
      },
      "typeVersion": 1.1
    },
    {
      "id": "7546ce49-56e9-44fd-96fd-324831f38f32",
      "name": "Sticky Note1",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        560,
        420
      ],
      "parameters": {
        "color": 4,
        "width": 1142,
        "height": 502,
        "content": "# Image processing part"
      },
      "typeVersion": 1
    },
    {
      "id": "cee89c8c-7b88-4cc5-84e4-eb7b404e5042",
      "name": "Sticky Note2",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        1720,
        660
      ],
      "parameters": {
        "width": 506,
        "height": 272,
        "content": "# Send back edited image
## Add extra steps to save an edited image"
      },
      "typeVersion": 1
    },
    {
      "id": "a340cd78-56dd-4ac8-a1c1-f3fc03771ae6",
      "name": "Mockups",
      "type": "n8n-nodes-base.set",
      "position": [
        660,
        220
      ],
      "parameters": {
        "options": {},
        "assignments": {
          "assignments": [
            {
              "id": "20c39c67-3cf8-4e29-b871-3202f2e20a3c",
              "name": "Images",
              "type": "array",
              "value": "={{
[
{\"url\":\"https://byuroscope.fra1.digitaloceanspaces.com/nc/uploads/noco/fluxtest/creative-arrangement-minimalist-podium_23-2148959328.jpg\",
 \"title\":\"Stage\" },
{\"url\":\"https://byuroscope.fra1.digitaloceanspaces.com/nc/uploads/noco/fluxtest/Standing-Big-Paper-Bag-Mockup.jpg\",
 \"title\":\"Paper Bag\" },
{\"url\":\"https://byuroscope.fra1.digitaloceanspaces.com/nc/uploads/noco/fluxtest/Ceramic-Mug-on-Table-Mockup.jpg\",
 \"title\":\"Big Mug\" },
{\"url\":\"https://byuroscope.fra1.digitaloceanspaces.com/nc/uploads/noco/fluxtest/Transparent-Bottle-on-Sunny-Beach-Mockup-D.jpg\",
 \"title\":\"Transparent-Bottle\" },
{\"url\":\"https://byuroscope.fra1.digitaloceanspaces.com/nc/uploads/noco/fluxtest/skin-products-arrangement-wooden-blocks_23-2148761445.jpg\",
 \"title\":\"Cosmetics\" }
]
}}"
            }
          ]
        }
      },
      "typeVersion": 3.4
    },
    {
      "id": "da82cb73-af4a-4042-bf4e-17894155fb87",
      "name": "Webhook",
      "type": "n8n-nodes-base.webhook",
      "position": [
        260,
        120
      ],
      "webhookId": "9c864ee6-e4d3-46e7-98d4-bea43739963e",
      "parameters": {
        "path": "flux-fill",
        "options": {},
        "responseMode": "responseNode",
        "multipleMethods": true
      },
      "typeVersion": 2
    },
    {
      "id": "0f35da2f-112c-45f9-9cbe-d64eb8bdc6d8",
      "name": "Editor page",
      "type": "n8n-nodes-base.html",
      "position": [
        1240,
        120
      ],
      "parameters": {
        "html": "<!DOCTYPE html>
<html lang=\"en\">
<head>
 <meta charset=\"UTF-8\">
 <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
 <title>Konva Image Editor</title>
 <script src=\"https://unpkg.com/konva@9/konva.min.js\"></script>
 <script defer src=\"https://unpkg.com/img-comparison-slider@8/dist/index.js\"></script>
 <link rel=\"stylesheet\" href=\"https://unpkg.com/img-comparison-slider@8/dist/styles.css\" />
 <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/ed-parsadanyan/n8n-flux-fill-demo/flux-fill-style.css\" />
 <script src=\"https://cdn.jsdelivr.net/gh/ed-parsadanyan/n8n-flux-fill-demo/flux-fill-canvas.js\"></script>
</head>
<body>
 <div class=\"controls-wrapper\">
 <div class=\"left-panel\">
 <div class=\"image-controls\">
 <select id=\"imageSelector\">
 <option value=\"\">Select an image...</option>
 <option value=\"local\">Load from PC...</option>
 </select>
 <input type=\"file\" id=\"fileInput\" style=\"display: none\" accept=\"image/*\">
 <button id=\"clearButton\">Clear All</button>
 </div>
 
 <div class=\"brush-controls\">
 <label for=\"brushSize\" title=\"Use mouse wheel to adjust brush size\">Brush Size:</label>
 <div class=\"slider-container\">
 <input type=\"range\" id=\"brushSize\" min=\"5\" max=\"40\" value=\"20\">
 <span class=\"slider-value\" id=\"brushSizeValue\">20px</span>
 </div>
 </div>
 </div>

 <div class=\"right-panel\">
 <div class=\"prompt-row\">
 <input type=\"text\" id=\"promptInput\" placeholder=\"Enter your prompt (optional)\">
 </div>
 
 <div class=\"main-controls\">
 <label class=\"checkbox-container\">
 <input type=\"checkbox\" id=\"improvePrompt\" checked>
 <span>Improve prompt</span>
 </label>
 
 <div>
 <button id=\"sendButton\">Generate</button>
 <span class=\"loading\" id=\"loadingIndicator\">Processing...</span>
 </div>
 </div>
 
 <div class=\"parameters\">
 <div class=\"slider-container\">
 <label for=\"stepsSlider\">Steps:</label>
 <input type=\"range\" id=\"stepsSlider\" min=\"15\" max=\"50\" value=\"40\">
 <span class=\"slider-value\" id=\"stepsValue\">40</span>
 </div>
 
 <div class=\"slider-container\">
 <label for=\"guidanceSlider\">Guidance:</label>
 <input type=\"range\" id=\"guidanceSlider\" min=\"1.5\" max=\"100\" value=\"60\" step=\"0.1\">
 <span class=\"slider-value\" id=\"guidanceValue\">60.0</span>
 </div>
 </div>
 </div>
 </div>

 <div class=\"info\" id=\"imageInfo\"></div>
 <div id=\"container\"></div>
 <div id=\"cursor\"></div>

 <div id=\"resultModal\" class=\"modal\">
 <div class=\"modal-content\">
 <div class=\"modal-image-container\">
 <div class=\"comparison-container\">
 <div class=\"image-container\">
 <img class=\"image-before\" id=\"originalImage\" src=\"\" alt=\"Original\">
 <img class=\"image-after\" id=\"resultImage\" src=\"\" alt=\"Generated\">
 </div>
 <input type=\"range\" min=\"0\" max=\"100\" value=\"10\" class=\"slider\">
 <div class=\"slider-line\"></div>
 <div class=\"slider-button\" aria-hidden=\"true\">
 &lt; &gt;
 </div>
 <div class=\"labels\">
 <div class=\"label-before\">Original</div>
 <div class=\"label-after\">Generated</div>
 </div>
 </div>
 </div>
 <div class=\"modal-buttons\">
 <button id=\"reuseButton\">Use Generated</button>
 <button id=\"saveButton\">Save Image</button>
 <button id=\"closeButton\">Close</button>
 </div>
 </div>
 </div>

<script>
 const urlParams = new URLSearchParams(window.location.search);
 const pageId = urlParams.get('id');

 // Image data will be populated by n8n
 const imageData = {{ JSON.stringify($json.Images,'',2) }};
 const webhookUrl = '{{ $json.webhookUrl }}';

 // Initialize the editor when the page loads
 document.addEventListener('DOMContentLoaded', function() {
 initializeEditor({
 images: imageData,
 webhookUrl: webhookUrl,
 pageId: pageId
 });
 });
</script>
</body>
</html>
"
      },
      "typeVersion": 1.2
    },
    {
      "id": "2ff87261-8a7f-451e-b8ae-b4274776ce28",
      "name": "Sticky Note3",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        540,
        20
      ],
      "parameters": {
        "color": 5,
        "width": 360,
        "height": 340,
        "content": "## Image array
* Load from PC
* Select one of the default images

### Change this node to
### get image URLs from your data source"
      },
      "typeVersion": 1
    },
    {
      "id": "08bb17fd-1440-4194-8c4f-e18222a68bf2",
      "name": "Sticky Note4",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        1080,
        -20
      ],
      "parameters": {
        "color": 5,
        "width": 400,
        "height": 300,
        "content": "## HTML code of the editor
* Konva.js
* img-comparison-slider to compare edits vs original file
* Additional css + js files for the editor logic"
      },
      "typeVersion": 1
    },
    {
      "id": "13a820d0-e83b-4d1e-81d1-738ef8ca4d47",
      "name": "Sticky Note5",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        580,
        500
      ],
      "parameters": {
        "color": 5,
        "width": 280,
        "height": 340,
        "content": "## Call FLUX-Fill Tool
Pass the following data:
* original image
* alpha mask from the editor
* text prompt
* additional settings"
      },
      "typeVersion": 1
    },
    {
      "id": "f4ab042c-d4da-4f1e-aa05-fdd2cca62d66",
      "name": "NO OP",
      "type": "n8n-nodes-base.noOp",
      "position": [
        420,
        680
      ],
      "parameters": {},
      "typeVersion": 1
    }
  ],
  "active": true,
  "pinData": {
    "Webhook": []
  },
  "settings": {
    "callerPolicy": "workflowsFromSameOwner",
    "executionOrder": "v1",
    "executionTimeout": 120,
    "saveDataSuccessExecution": "all"
  },
  "versionId": "6d4112be-fb6f-4702-ac5f-2c49ff0117d4",
  "connections": {
    "Merge": {
      "main": [
        [
          {
            "node": "Editor page",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "NO OP": {
      "main": [
        [
          {
            "node": "FLUX Fill",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Mockups": {
      "main": [
        [
          {
            "node": "Merge",
            "type": "main",
            "index": 1
          }
        ]
      ]
    },
    "Webhook": {
      "main": [
        [
          {
            "node": "Merge",
            "type": "main",
            "index": 0
          },
          {
            "node": "Mockups",
            "type": "main",
            "index": 0
          }
        ],
        [
          {
            "node": "NO OP",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "FLUX Fill": {
      "main": [
        [
          {
            "node": "Wait 3 sec",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Is Ready?": {
      "main": [
        [
          {
            "node": "Get Fill Image",
            "type": "main",
            "index": 0
          }
        ],
        [
          {
            "node": "Wait 3 sec",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Wait 3 sec": {
      "main": [
        [
          {
            "node": "Check FLUX status",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Editor page": {
      "main": [
        [
          {
            "node": "Respond to Webhook",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Get Fill Image": {
      "main": [
        [
          {
            "node": "Show the image to user",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Check FLUX status": {
      "main": [
        [
          {
            "node": "Is Ready?",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  }
}